<template>
    <div>
        <template v-for="item in menuData">
            <el-submenu :index="item.name" v-if="item.children.length">
                <template slot="title">
                    <i class="el-icon-location"></i>
                    <span slot="title">{{item.name}}</span>
                </template>
                <MenuTree :menuData="item.children"></MenuTree>
            </el-submenu>
            <el-menu-item :index="item.name" v-else>
                <i class="el-icon-menu"></i>
                <span slot="title">{{item.name}}</span>
            </el-menu-item>
        </template>
    </div>
</template>

<script>

    export default {
        props: ['menuData'],
        name: 'MenuTree'
    }
</script>


<style scoped>

</style>
